最近在把將原本使用 Vue CLI 開發的專案轉換成使用 Vite 建構
畢竟 Vite 真的很快啊
過程中，遇到了一些需要特別處理的部分，在此做個紀錄

import component 時.vue要寫出來

若要在 a.vue 中 import component b
在 Vue CLI 中我是這樣寫的

import Bcomponent from '@/components/b'

然而，很快就跳出了錯誤

[plugin:vite:import-analysis] Failed to resolve import "@/components/b" from "src/views/a.vue". Does the file exist?

要改成

import Bcomponent from '@/components/b.vue'

要明確寫出 .vue 才能正常運作

Vite 沒有預設 ~ 等於 node_modules

Vue CLI 預設將 ~ 作為 node_modules 路徑
因此，當我們寫 ~bootstrap/scss/bootstrap 時
就等於 ../node_modules/bootstrap/scss/bootstrap

但在 Vite 中並沒有這個預設
需要自己設定 alias 或是直接把 node_modules 路徑寫出來()

環境變數的差異

在 Vue CLI 中我們是這樣設定環境變數的

VUE_APP_API=......

然後使用 process.env.VUE_APP_API 來取得值

const api = `${process.env.VUE_APP_API}/login`

在 Vite 中要改成

VITE_API=......

取值是import.meta.env.環境變數名稱

const api = `${import.meta.env.VITE_API}/login`

要自己裝 sass

Vite中的選項並不會包含sass，因此需要額外npm add -D sass

以上，一點簡單的紀錄